<template>
	<view class=""> <!-- 组件模板 -->
		<canvas canvas-id="drawCanvas"
			style="width: 750rpx; height: 750rpx;position: absolute;left:-750rpx;top: -750rpx;background: #fff;z-index: 99;"></canvas>
	</view>

</template>

<script>
	import { // 引入绘制画布和生成画布的方法
		drawCanvas,
		generateCanvas
	} from '@/utils/utils.js'
	export default {
		name: "preview-phonecase",
		props: { // 定义组件的属性
			stickerImageList: {
				type: Array,
				default: () => []
			},
			frameImageUrl: {
				type: String,
				default: ''
			},
			baseImageUrl: {
				type: String,
				default: ''
			},
			detail:{
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				decorationList: [], // 装饰列表
				details:[], // 详情列表
				img: '', // 图片
			};
		},
		watch: {
			stickerImageList(newValue, oldValue) { // 监听贴纸图片列表的变化
				this.decorationList = newValue
			},
			detail(newValue, oldValue) { // 监听detail属性的变化
				this.details = newValue
			}
		},
		methods: {
			show(index) { // 显示指定索引的元素
				this.getImg(index)
			},
			// 生成图片
			getImg(index) {
				uni.showLoading({
					mask:true
				})
				const _this = this
				let canvasData = {
					bottomMaterialUrl: this.baseImageUrl,
					topMaterialUrl: this.frameImageUrl,
					stickerImageList: this.stickerImageList,
				}
				// console.log(canvasData);
				let gc = generateCanvas
				// 生成效果图
				gc(canvasData, this.stickerImageList.length * 300 + 1000, this).then(res => {
					this.img = res
					let imgs = this.details.map(item=>{
						return item.imageUrl
					})
					let arr = [this.img,...imgs]
					uni.previewImage({
						current: index,
						urls: arr
					});
					uni.hideLoading()
				})
			},
		},
		onLoad() {
			console.log('preview-phonecase');
		}
	}
</script>

<style lang="scss" scoped>
	.preview-phonecase { // 预览手机壳
		height: 100%; // 设置预览手机壳的高度和宽度为100%，绝对定位，层级为99，距离顶部和左侧0，背景颜色为黑色
		width: 100%;
		position: absolute; // 设置绝对定位
		z-index: 99; // 设置z-index为99
		top: 0; // 设置顶部和左侧为0
		left: 0;
		background-color: #000; // 设置背景颜色为黑色

		.swiper { // 轮播图
			height: 100vh; // 设置轮播图的高度为100vh
		}

		.movable-area { // 可移动区域
			height: 750rpx; // 高度
			width: 750rpx; // 宽度
			position: absolute; // 绝对定位
			top: calc(50% - 375rpx); // 顶部距离

			.movable-view { // 可移动视图
				height: 750rpx; // 高度
				width: 750rpx; // 宽度
				overflow: hidden; // 溢出隐藏

				.picture { // 图片
					height: 100%; // 高度
					width: 100%; // 宽度
					position: absolute; // 绝对定位
					top: 0; // 顶部距离
					left: 0; // 左侧距离

					&.top, // 顶部图片
					&.btm, // 底部图片
					&.bg, // 背景图片
					&.fg { // 前景图片
						height: 750rpx;
						width: 750rpx; // 设置图片的高度为750rpx
					} // 设置图片的宽度为750rpx

					&.btm {
						z-index: 0;
					} // 设置底部图片的z-index为0

					&.bg {
						z-index: 2;
					} // 设置背景图片的z-index为2

					&.fg {
						z-index: 4;
					} // 设置前景图片的z-index为4

					&.top {
						z-index: 999;
					} // 设置顶部图片的z-index为999
				}
			}
		}
	}
</style>